import React from "react";
import styles from './index.module.scss';
import classnames from 'classnames';
import {IconFont} from '@/components';
import DrawerSwitchBox from '../../manager/DrawerBox';
import {
  PullRequestOutlined
} from '@ant-design/icons';
import {Layout, Menu} from 'antd';
import {EE} from "@/utils";
import EnumOnFire from "@/pages/dv/constants/EnumOnFire";
import dvTool from "@/pages/dv/dvTool";
import {pull, uniq} from 'lodash';


interface IProps {

}

interface IState {
  collapsed: boolean;
  selectedKeys: string[];
}

/**
 * 图层仪表盘
 * @param panelData
 * @constructor
 */
export default class SiderManageTool extends React.PureComponent<IProps, IState> {

  constructor(props: IProps) {
    super(props);
    this.state = {
      collapsed: true,
      selectedKeys: ['layer']
    }
  }

  componentDidMount(): void {

  }

  getTools() {
    return [
      {title: '图层管理', value: 'layer', icon: <IconFont type={'icon-layers'}/>},
      {title: 'CSS设置', value: 'css', icon: <IconFont type={'icon-css'}/>},
      {title: '图片管理', value: 'image', icon: <IconFont type={'icon-image'}/>},
      {title: '数据管理', value: 'data', icon: <IconFont type={'icon-datasource'}/>},
      {title: '主题管理', value: 'theme', icon: <IconFont type={'icon-colors'}/>},
      {title: '模块管理', value: 'module', icon: <IconFont type={'icon-module'}/>},
      {title: '事件管理', value: 'events', icon: <PullRequestOutlined/>},
      {title: '性能分析', value: 'performance', icon: <IconFont type={'icon-performance'}/>},
      {title: '快照管理', value: 'snapshot', icon: <IconFont type={'icon-snapshot'}/>},
      {title: '分享大屏', value: 'share', icon: <IconFont type={'icon-share'}/>},
      {title: '锁屏禁止操作', value: 'lock', icon: <IconFont type={'icon-lock'}/>},
    ]
  }

  handleSelect = ({ item, key, keyPath, domEvent }) => {
    this.setState(prevState => {
      let selectedKeys = prevState.selectedKeys
      const index = selectedKeys.indexOf(key);
      if(index !== -1){
        selectedKeys.splice(index, 1);
      } else {
        selectedKeys = uniq(selectedKeys.concat(key))
      }
      return {
        selectedKeys: [...selectedKeys]
      }
    })
  }

  /**
   * 关闭模块
   * @param module
   */
  handleClose = (module: string) => {
    this.setState(prevState => ({
      selectedKeys: [...pull(prevState.selectedKeys, module)]
    }))
  }

  render(): React.ReactNode {

    const {collapsed, selectedKeys} = this.state;
    const siderProps = {
      collapsedWidth: 32,
    }
    return [
      <Layout.Sider
        key={'leftTool'}
        className={styles.siderManageBox}
        collapsed={collapsed}
        {...siderProps}
      >
        <Menu
          selectedKeys={selectedKeys}
          mode="inline"
          theme="dark"
          style={{
            width: this.state.collapsed ? siderProps.collapsedWidth : '100%'
          }}
          siderCollapsed={this.state.collapsed}
          className={styles.menuBox}
          onClick={this.handleSelect}
        >
          {
            this.getTools().map(tool => {
              const {title, value, icon, ...ItemProps} = tool;
              return <Menu.Item
                key={value}
                icon={icon}
                {...ItemProps}
              >
                {title}
              </Menu.Item>
            })
          }
        </Menu>
      </Layout.Sider>,
      <DrawerSwitchBox
        key={'DrawerSwitchBox'}
        selectedKeys={selectedKeys}
        onClose={this.handleClose}
      />
    ]
  }


}
